<template>
  <div class="bottom-bar">
    <div
      v-for="(item, index) in tabList"
      :key="index"
      :class="[
        'navImage',
        'navPos',
        currentTab === item.key && currentTabData.type === item.type
          ? 'textActive'
          : ''
      ]"
      @click="handleInitData(item.key, item.type)"
    >
      <img :src="currentTab == item.key ? item.imgA : item.img" alt="" />
      {{ item.name }}
    </div>
  </div>
</template>

<script setup lang="ts">
import * as L from 'leaflet'
import whitePng from '../images/white.png'
import { useTrafficStore } from '@/pages/traffic/store/store'
import { useBaseLeafletMapStore } from '@/store/modules/baseLeafletMap'

const baseLeafletMapStore = useBaseLeafletMapStore()
const trafficStore = useTrafficStore()

const currentTab = computed(() => trafficStore.currentTab)
const currentTabData = computed(() => trafficStore.currentTabData)
const tabList = computed(() => trafficStore.tabList)

const handleInitData = key => {
  if (!trafficStore.mapLoading && currentTab.value !== key) {
    trafficStore.currentTab = key
    trafficStore.timeList = []
    trafficStore.timeText = []
    baseLeafletMapStore.baseMap.setView([37.618179, 112.304436], 7)
    trafficStore.mapStyle = 'wx'
    useEventBus('handleRemoveLayer').emit('whiteOverlay')
    useEventBus('handleChangeMapStyle').emit('wx')
  }
}

onMounted(() => {
  handleInitData('lineDanger')
})
</script>

<style scoped lang="scss">
.bottom-bar {
  width: 1351px;
  height: 128px;
  background: url(../images/navBag.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -11px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: start;
  .navImage {
    width: 100px;
    height: 100px;
    cursor: pointer;
    img {
      width: 98px;
      height: 96px;
      display: block;
      margin: auto;
    }
  }
  .navPos {
    margin-right: 30px;
    margin-top: -20px;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #00ccff;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }
  .textActive {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    line-height: 1.5;
    text-shadow: 0px 0px 6px #ffd500;
    text-align: center;
    font-style: normal;
  }
  .navPos:nth-child(1),
  .navPos:nth-child(4) {
    width: 100px;
    height: 100px;
    margin-top: 9px;
    img {
      width: 66px;
      height: 66px;
      display: block;
      margin: auto;
    }
  }
  .navPos:nth-child(2),
  .navPos:nth-child(3) {
    width: 88px;
    height: 100px;
    margin-top: -13px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
